<template>
  <div>
    <mt-navbar v-model="selected" fixed style="margin-top: 1.6rem">
      <mt-tab-item id="1">单机榜</mt-tab-item>
      <mt-tab-item id="2">网游榜</mt-tab-item>
      <mt-tab-item id="3">应用榜</mt-tab-item>
      <mt-tab-item id="4">热搜榜</mt-tab-item>
    </mt-navbar>
    <mt-loadmore :top-method="loadTop"
                 ref="loadmore" style="font-size: .4rem">
      <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
          <div style="padding-bottom: 1.5rem"></div>
          <ul v-for="(item,index) in newdata" :key="index">
            <li><img :src="item.id"></li>
            <li class="left leftOne"><img :src="item.img"></li>
            <li class="right rightOne">
              <p>{{item.name}}</p>
              <p><span>{{item.active}}</span>{{item.flow}}</p>
              <span>{{item.btn}}</span>
            </li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
          <div style="padding-bottom: 1.5rem"></div>
          <ul v-for="(item,index) in newlist" :key="index">
            <li><img :src="item.id"></li>
            <li class="left leftOne"><img :src="item.img"></li>
            <li class="right rightOne">
              <p>{{item.name}}</p>
              <p><span>{{item.active}}</span>{{item.flow}}</p>
              <span>{{item.btn}}</span>
            </li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
          <div style="padding-bottom: 1.5rem"></div>
          <ul v-for="(item,index) in newdata" :key="index">
            <li><img :src="item.id"></li>
            <li class="left leftOne"><img :src="item.img"></li>
            <li class="right rightOne">
              <p>{{item.name}}</p>
              <p><span>{{item.active}}</span>{{item.flow}}</p>
              <span>{{item.btn}}</span>
            </li>
          </ul>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
          <div style="padding-bottom: 1.5rem"></div>
          <ul v-for="(item,index) in newlist" :key="index">
            <li><img :src="item.id"></li>
            <li class="left leftOne"><img :src="item.img"></li>
            <li class="right rightOne">
              <p>{{item.name}}</p>
              <p><span>{{item.active}}</span>{{item.flow}}</p>
              <span>{{item.btn}}</span>
            </li>
          </ul>
        </mt-tab-container-item>
      </mt-tab-container>
    </mt-loadmore>
    <mt-tabbar :fixed="true" class="tabbars">
      <mt-tab-item id="推荐">
        <router-link exact :to="{name:'Recommend'}">
          <img src="../assets/小图标/心.png">
          推荐
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="应用">
        <router-link :to="{name:'Users'}">
          <img src="../assets/小图标/应用.png">
          应用
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="游戏">
        <router-link :to="{name:'Game'}">
          <img src="../assets/小图标/游戏.png">
          游戏
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="排行">
        <router-link :to="{name:'Rankings'}">
          <img src="../assets/小图标/排行1.png">
          排行
        </router-link>
      </mt-tab-item>
      <mt-tab-item id="管理" >
        <router-link :to="{name:'Administration'}">
          <img src="../assets/小图标/管理.png">
          管理
        </router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import axios from 'axios'
    export default {
        name: "Rankings",
      data(){
          return{
            selected:"1",
            getUrl:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/rankings",
            newdata:[],
            getrankings:"https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/rankingsOne",
            newlist:[],
            num:0
          }
      },
      methods:{
          gets(){
            axios.get(this.getUrl)
              .then(res=>{
                this.newdata = res.data.data;
                console.log(this.newdata);
              })
              .catch(error=>{
                console.log(error)
              });
            axios.get(this.getrankings)
              .then(res=>{
                this.newlist = res.data.list;
                console.log(this.newlist);
              })
          },
        get(){
          axios.get(this.getUrl)
            .then(res=>{
              this.newdata = res.data.data;
              console.log(this.newdata);
            })
            .catch(error=>{
              console.log(error)
            });
          axios.get(this.getrankings)
            .then(res=>{
              this.newlist = res.data.list;
              console.log(this.newlist);
            })
        },
        loadTop() {
          this.$refs.loadmore.onTopLoaded();
          this.num+=1;
          if (this.num%2==0){
            this.getUrl = "https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/rankings";
            this.getrankings = "https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/rankingsOne";
          } else {
            this.getUrl = "https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/rankingsrTwo";
            this.getrankings = "https://www.fastmock.site/mock/570927fb874b97eba109025ea6bd33ba/zhuchengao/rankingsThree";
          }
          this.get();
        },
      },
      mounted() {
        this.gets();
      }
    }
</script>

<style scoped>
  .leftOne{
    padding-left: .8rem;
  }
  .rightOne{
    padding-left: .5rem;
  }
  .rightOne p:nth-child(2) span{
    display: inline-block;
    width: 1.5rem;
    line-height: .6rem;
    text-align: center;
    background: #fafae7;
    border-radius: 50px;
    margin: .1rem .2rem 0 -.1rem;
  }
  .mint-tab-container-item>ul li:nth-child(1){
    position: absolute;
    margin-left: .2rem;
    margin-top: .4rem;
  }
  .mint-tab-container-item>ul li:nth-child(1) img{
    width: .6rem;
    height: .6rem;
  }
</style>
